<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能客服</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    

    

        <!--<link rel="stylesheet" href="//at.alicdn.com/t/font_330648_o000yqhxadmwjyvi.css">-->
    <link href="{{ asset('css/service/serce.css') }}" rel="stylesheet">
    <link href="{{ asset('css/service/style.css') }}" rel="stylesheet">

    {{--<script src="../js/jquery-3.1.1.min.js"></script>--}}
    <script src="{{ asset('js/jquery-3.1.1.min.js') }}"></script>
    <style>

        .chat-record{

            margin-bottom:4rem;

        }

        .time-box {

            text-align: center;

        }



        .time {

            display: inline-block;

            margin: .625rem 0;

            padding: .25rem .625rem;

            background-color: #e6e6e6;

            border-radius: 1.25rem;

            font-size: .75rem;

            color: #666;

        }

        .item{

            position:relative;

            margin-bottom:1.125rem;

            overflow:hidden;

        }

        .img-box {

            position:absolute;

            top:0;

            width: 2.625rem;

            height: 2.625rem;

        }

        .item-left .img-box{

            left:0;

            margin-left:.75rem;

        }

        .item-left .cont{

            margin:0 3.375rem 0 4rem;

        }

        .item-right .img-box{

            right:0;

            margin-right:.75rem;

        }

        .item-right .cont{

            float:right;

            margin:0 4rem 0 3.375rem;

        }

        .triangle{

            position:absolute;

            top:.6875rem;

            width:0;

            height:0;

            border-width:.625rem;

            border-style:solid;

        }

        .item-left .triangle{

            left:2.75rem;

            border-color:transparent #fff transparent transparent;

        }

        .item-right .triangle{

            right:2.75rem;

            border-color:transparent transparent transparent #fff;

        }



        .img-box img {

            width: 100%;

            height: 100%;

            border-radius: 50%;

        }

        .cont{

            padding:.625rem;

            background-color:#fff;

            box-sizing: border-box;

            border-radius:8px;

            display:inline-block;

        }

        .cont span{

            display:inline-block;

            line-height:1.25rem;

            font-size:.75rem;

        }

        .footer{

            position:fixed;

            left:0;

            bottom:0;

            height:3.125rem;

            width:100%;

            background-color:#fff;

            overflow: hidden;

            box-sizing: border-box;

        }

        .icon-img{

            position:absolute;

            left:.75rem;

            bottom:.875rem;

            z-index:10;

        }

        .icon-img i{

            font-size:1.625rem;

            color:#999;

        }

        .input-cont{

            position:absolute;

            left:0;

            width:100%;

            z-index:5;

            padding:.875rem 3.625rem .625rem 2.875rem;

        }

        .input-cont textarea{

            width:100%;

            border:none;

            outline: none;

            height:1.875rem;

            line-height:1.25rem;

            box-sizing: border-box;

            border-bottom:1px solid #ddd;

            font-size:.875rem;

            overflow-y:visible;

        }

        .send{

            position:absolute;

            right:0;

            bottom:0;

            z-index:10;

            height:3.125rem;

            line-height:3.125rem;

            padding: 0 .65rem;

        }

    </style>

</head>

<body style="background-color: #f1f1f1;">

<header>

    <div class="head">

        <div class="h-L">

            <a href="javascript:window.history.back();" class="h-L-a">

                <i class="iconfont icon-left" style="color: #fff;"></i>

            </a>

        </div>

        <div class="h-C">智能客服</div>

        <div class="h-R" style="text-align:right;font-size:.875rem;color:#fff;margin-right:1.25rem;">

            <i class="iconfont icon-zhankai"></i>

        </div>

    </div>

</header>

<section>

    <div class="time-box">

        <span class="time"></span>

    </div>

    <div class="chat-record">

    

    </div>

    <div class="footer">

        <div class="icon-img">

            <i class="iconfont icon-xiaolian"></i>

        </div>

        <div class="input-cont">

            <textarea name="content" id="content"></textarea>

        </div>

        <div class="send">

            <span>发送</span>

        </div>

    </div>

</section>

<script type="text/javascript" src="/mobile/js/myjs.js"></script>

<script>

    var cont;

    $(function(){

        $('textarea').on('input', function(){

            cont = $(this).val();

        })

        var nowTime = Date.parse(new Date());

        $('.time').html(mtime(nowTime/1000))

    });

    $('.send').on('click', function() {

        if(cont){

            $('.chat-record').append(right(cont));

            $('#content').val('');

            $.ajax({

                type:"POST",

                url:"../intelligent_robot.php",

                dataType:"json",

                data:{

                    action:"send",

                    keyword: cont

                },

                success:function(data){

                    console.log(data);

                    if(data.code === 200){

                        $('.chat-record').append(left(data.data));

                    }

                },

                error:function(){

                    console.log('网络错误,请稍后再试！');

                }

            });

        }

    })

    function right(param) {

        var right = '<div class="item item-right">\n' +

            '            <div class="img-box">\n' +

            '                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523440794146&di=3caee890373915ddf0133c3ec04cddda&imgtype=0&src=http%3A%2F%2F2t.5068.com%2Fuploads%2Fallimg%2F150331%2F1159255I2-4.png"\n' +

            '                     alt="">\n' +

            '            </div>\n' +

            '            <div class="cont">\n' +

            '                <span>'+ param +'</span>\n' +

            '            </div>\n' +

            '            <div class="triangle"></div>\n' +

            '        </div>';

        return right;

    }

    function left(param) {

        var left = '<div class="item item-left">\n' +

            '            <div class="img-box">\n' +

            '                <img src="/mobile/img/loginlogo.gif"\n' +

            '                     alt="">\n' +

            '            </div>\n' +

            '            <div class="cont">\n' +

            '                <span>'+ param +'</span>\n' +

            '            </div>\n' +

            '            <div class="triangle"></div>\n' +

            '        </div>';

        return left;

    };

</script>

</body>

</html>